<template>
	<image src="../../static/image/20.png" mode="widthFix" class="bg"></image>
	<u-navbar title=""  :background="{background:'transparent'}" :border-bottom="false"></u-navbar>
	<view class="body">
		<view class="container">
			
			<view class="t-flex colum">
				<image src="../../static/logo.png" mode="aspectFit" class="logo"></image>
				<view class="f30 c3 mt20 bold">
					驾照陪练
				</view>
				
				<button id="login" class="login t-flex center cf f30" open-type="getPhoneNumber"  @getphonenumber="login">一键登录</button>
			</view>
		</view>
	</view>

	<view class="bottom safeArea bgf">
		<view class="rule f24 c9 p20 t-flex center">
			<u-checkbox v-model="checked" active-color="#E40417" shape="circle"></u-checkbox>
			已阅读并同意 <text @click="$go('/pages/public/onePage?key=user_agreement')">《用户服务协议》</text> 与
			<text  @click="$go('/pages/public/onePage?key=privacy_agreement')">《隐私政策》</text>
		</view>
	</view>
	
	<setUserinfo ref="setUserinfoE"></setUserinfo>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { routeFn, showToast, tRequest } from '../../lib/ts/util';
import { useStore } from '../../store';
import { wxlogin } from '../../api';
	
	let checked = ref(false)
	const store = useStore()
	const setUserinfoE = ref()
	
	const login = async (e)=>{
		if(checked.value){
			if(e.detail.code){
				let res = await wxlogin({
					code:e.detail.code,
					sf_pid:uni.getStorageSync('sf_pid') || 0,
					xy_pid:uni.getStorageSync('xy_pid') || 0
				})
				store.getUserinfo()
				if(!res.avatar){
					setUserinfoE.value.open()
				}else{
					routeFn.back('登录成功')
					uni.removeStorageSync('readed')
				}
				getOpenid()
			}
		}else{
			showToast('请先阅读并勾选《用户服务协议》与《隐私政策》')
		}
	}
	
	
	const getOpenid = ()=>{
		uni.login({
			success(e) {
				tRequest('get','/api/user/MingetOpenid',{code:e.code})
			}
		})
	}

	
</script>

<style scoped lang="scss">
	.body{
		background-color: #fff;
		min-height: 100vh;
	}
	.bg{
		width: 100%;
		position: absolute;
	}
	
	.logo{
		width: 120rpx;
		height: 120rpx;
		margin-top: 90rpx;
	}
	.container{
		position: relative;
		z-index: 2;
	}
	
	.login{
		width: 604rpx;
		height: 92rpx;
		background: $main-color;
		border-radius: 45rpx;
		margin-top: 200rpx;
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}
	.rule{
		text{
			color: #E40417;
		}
	}

</style>
